<template>
  <div>
    <div class="block">
      <div class="infotab">
        <div
          v-for="(item,index) in tab"
          :key="index"
          class="item"
          :class="tabIndex==index?'active':''"
          @click="onTabTap(index)"
        >{{item.title}}
        </div>
      </div>
    </div>
    <div class="block">
      <div v-for="(item,index) in tab" :key="index">
        <div v-if="tabIndex==index">
          <!--如果返回的是图片数组-->
          <template v-if="item.content instanceof Array">
            <div class="infoIBoxD imgProduct">
              <img v-for="(img, index) in item.content" :src="img" :key="index">
            </div>
          </template>
          <!--如果不是-->
          <template v-else>
            <div class="infoIBoxD" v-if="iosweixin" id="iosweixin">
              <div class="infoIBox" v-html="item.content"></div>
            </div>
            <div v-else class="infoIBoxD" :style="{'height':`${iframeHeight*scale+10}px`}">
              <iframe
                :srcdoc="item.content"
                class="infoIBox"
                frameborder="0"
                :style="{'height':iframeHeight+'px','width':iframeWidth+'px','transform':`scale(${scale},${scale})`}"
                @load="changeFrameHeight($event)"
                scrolling="no"
              ></iframe>
              <load-more
                v-if="infoIBoxLoad"
                :show-loading="true"
                :tip="'加载中'"
                background-color="#fbf9fe"
              ></load-more>
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  // eslint-disable-next-line no-unused-vars
  import Util from '@/utils/util'

  export default {
    name: 'mallinfo',
    props: {
      tab: {
        type: Array,
        value: []
      }
    },
    data () {
      let iosweixin = true
      // let iosweixin = Util.isIos() && Util.isWeixn()
      return {
        tabIndex: 0,
        infoIBoxLoad: true,
        iframeHeight: 0,
        iframeWidth: 0,
        scale: 1,
        iosweixin: iosweixin
      }
    },
    methods: {
      onTabTap (index) {
        this.tabIndex = index
        this.infoIBoxLoad = true
      },
      changeFrameHeight (e) {
        this.iframeHeight = 0
        this.iframeWidth = 0
        this.iframeHeight = e.currentTarget.contentDocument.body.clientHeight
        this.iframeWidth = e.currentTarget.contentDocument.body.scrollWidth
        this.scale = e.currentTarget.parentNode.clientWidth / this.iframeWidth
        this.infoIBoxLoad = false
      }
    }
  }
</script>

<style lang="less" scoped>
  .infotab {
    border-top: 1px solid #fbf8f7;
    box-sizing: border-box;
    width: 100%;
    display: flex;
    padding-left: 12px;
    padding-right: 12px;
    height: 45px;
    z-index: 9999;
    background-color: #fff;
  }

  .infotab > .item {
    width: 33.3333%;
    height: 100%;
    display: block;
    line-height: 45px;
    font-size: 14px;
    color: #351009;
    text-align: center;
    position: relative;
  }

  .infotab > .item.active {
    color: #ae2309;
  }

  .infotab > .item.active::after {
    position: absolute;
    content: "";
    width: 60%;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: 1px;
    background: #b0290f;
  }

  .infoIBox {
    /deep/ *{
      max-width: 100% !important;
      width: auto !important;
      box-sizing: border-box !important;
      padding: 0;
    }
  }
</style>
